<template>
	<view class="container">
		<view class="menu-box">
			<view class="menu-item" v-for="(item,index) in menuList" :key='index'>
				<view class="menu-title">
					<view class="icon">
						<u-icon :name="item.icon" size="16" color="#fff"> </u-icon>
					</view>
					<view class="text">
						{{item.title}}
					</view>
				</view>
				<view class="menu-children-box">
					<view class="menu-children-item" :key='indexs' v-for="(items,indexs) in item.menu_item"
						@click="onSlectMenu(items)">
						<view class="text">
							{{items.title}}
						</view>
						<view class="icon">
							<u-icon :name="items.icon" size="16" color="#888888"> </u-icon>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="footer-box">
			<view class="input">
				<u-input c placeholderStyle='color:#888' color='#FFF' border='none' placeholder="写下你想问的..."></u-input>
			</view>
			<view class="submit">
				<image src='@/static/tabbar/fasong.png'>
					</imgae>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sendMessage
	} from "@/apis/modules/index.js"
	export default {
		data() {
			return {
				menuList: [{
						icon: 'question-circle-fill',
						title: '科学疑问',
						menu_item: [{
							icon: 'arrow-right',
							title: '为什么对立面和对立面不对称?'
						}, {
							icon: 'arrow-right',
							title: '什么是暗物质?'
						}]
					},
					{
						icon: 'edit-pen-fill',
						title: '写作',
						menu_item: [{
								icon: 'arrow-right',
								title: '写一首关于花和爱的诗'
							}, {
								icon: 'arrow-right',
								title: '写一首王小波风格的情书?'
							},
							{
								icon: 'arrow-right',
								title: '写一首17岁时的情歌'
							}
						]
					},
					{
						icon: 'github-circle-fill',
						title: 'code',
						menu_item: [{
								icon: 'arrow-right',
								title: '用JavaScript写一个递归函数'
							}, {
								icon: 'arrow-right',
								title: '用JavaScript写一个冒泡排序'
							},
							{
								icon: 'arrow-right',
								title: '用JavaScript写一个事件监听'
							}
						]
					},
				]
			}
		},
		methods: {
			onSlectMenu(item) {
				sendMessage({
					id: '1',
					msg: item.title
				})
				// uni.request({
				// 	url: `http://192.168.31.171:8080/index/sendMessage`,
				// 	method: 'POST',
				// 	data: {
				// 		id: '1',
				// 		msg: item.title
				// 	},
				// 	success(res) {
				// 		console.log("res: ", res);
				// 	}
				// })
				
				// uni.request({
				// 	url: `http://192.168.31.171:5000/sendMsg`,
				// 	method: 'GET',
				// 	success(res) {
				// 		console.log("res: ", res);
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;

		.menu-box {
			.menu-item {
				margin-bottom: 30rpx;

				.menu-title {
					display: flex;
					align-items: center;
					font-size: 32rpx;

					.icon {}

					.text {
						color: #FFF;
						margin-left: 15rpx;
					}
				}

				.menu-children-box {
					margin-top: 30rpx;
					background-color: #111111;
					padding: 0 30rpx;
					border-radius: 14rpx;

					.menu-children-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 30rpx 0;
						border-bottom: 2rpx solid #0d0d0d;

						// background-color: skyblue;
						// border-radius: 14rpx;
						.text {
							color: #888888;
							font-size: 26rpx;
						}

						.icon {}
					}
				}

			}
		}

		.footer-box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			position: fixed;
			// left: 0;
			bottom: 120rpx;
			width: 92%;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			background-color: #1a1a1a;
			border-radius: 40rpx;

			.input {
				flex: 1;
			}


			.submit {
				background-color: #60ba60;
				border-radius: 40rpx;
				flex: .2;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 10rpx 0;

				image {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
</style>